
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SpringSession - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>SpringSession - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在分布式集群环境中，为什么会出现“Session共享问题”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为HttpSession由Servlet容器（如Tomcat）创建并默认保存在内存中。当使用负载均衡（如Nginx）将来自同一用户的请求分发到不同的Web服务器时，一个服务器上创建的Session在另一个服务器上是不可见的，导致无法共享同一份Session数据。</div>
          </div>
          <div class="card-source">来源: Session共享问题</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">“Session复制”方案有哪些主要缺点，导致它不适用于大型分布式集群？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. session同步需要通过网络传输数据，会占用大量带宽，降低业务处理能力。2. 每台服务器都需要保存所有服务器的session总和，受到内存限制，无法水平扩展。3. 在大型集群中，由于所有服务器都需全量保存数据，此方案不可取。</div>
          </div>
          <div class="card-source">来源: Session共享解决方案 - Session复制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">相较于其他方案，“Hash一致性”（如ip_hash）方案的主要优点和缺点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">优点：1. 只需修改Nginx等负载均衡配置，无需修改应用代码。2. 只要hash属性值分布均匀，就能实现负载均衡。3. 支持Web服务器水平扩展。缺点：1. Web服务器重启可能导致部分Session丢失。2. 服务器扩容时，rehash会导致一部分用户的路由变更，无法找到正确的Session。</div>
          </div>
          <div class="card-source">来源: Session共享解决方案 - Hash一致性</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">将Session进行“统一存储”（例如存入Redis）的方案有哪些优缺点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">优点：1. 没有安全隐患。2. 可以方便地进行水平扩展。3. Web服务器重启或扩容不会导致Session丢失。缺点：1. 增加了一次网络调用。2. 需要修改应用代码（例如替换getSession方法）。3. 从Redis等外部存储获取数据比直接从内存读取要慢。</div>
          </div>
          <div class="card-source">来源: Session共享解决方案 - 统一存储</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Spring Session是什么，它主要解决了什么问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Spring Session是一个提供了用于管理用户会话信息的API和实现的框架。它主要解决了在集群环境下实现全局Session（也称分布式Session）的问题，使得支持集群会话变得简单，并且不依赖于特定的应用容器（如Tomcat）解决方案。</div>
          </div>
          <div class="card-source">来源: SpringSession</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Spring Boot应用中集成Spring Session并使用Redis作为存储时，需要在主启动类上添加哪个关键注解？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要在主启动类上添加 @EnableRedisHttpSession 注解来开启基于Redis的Session共享功能。</div>
          </div>
          <div class="card-source">来源: SpringBoot整合SpringSession - 主启动类开启</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Spring Session的工作原理涉及哪些核心对象？它们分别扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Spring Session的核心对象包括：1. SessionRepository：主要负责完成Session的CRUD（增删改查）操作。2. SessionRepositoryFilter：它是一个过滤器（Filter），用于拦截所有请求。3. SessionRepositoryRequestWrapper：它包装了原生的HttpServletRequest，并重写了getSession方法，使得Session的读写操作都通过SessionRepository来进行，而不是通过原生的方式。</div>
          </div>
          <div class="card-source">来源: SpringSession原理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Spring Session是如何通过`SessionRepositoryFilter`拦截并替换原生HttpSession行为的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`SessionRepositoryFilter`会拦截所有请求，并使用`SessionRepositoryRequestWrapper`来包装原始的`HttpServletRequest`对象。这个Wrapper复写了`getSession`方法，当应用代码调用`request.getSession()`时，实际上调用的是Wrapper中的方法，该方法会通过`SessionRepository`从Redis等集中式存储中读取Session，从而实现了对原生Session行为的替换。</div>
          </div>
          <div class="card-source">来源: SpringSession原理 - SessionRepositoryFilter</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在Spring Session配置中，如何将存储在Redis中的Session对象序列化为JSON格式，并解决Cookie跨域问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以通过配置一个`RedisSerializer<Object>`的Bean来实现JSON序列化，例如返回一个`GenericFastJsonRedisSerializer`实例。同时，可以配置一个`CookieSerializer`的Bean，通过调用`setDomainName`方法设置主域名（如“ts.com”）来解决Cookie的跨域问题。</div>
          </div>
          <div class="card-source">来源: 使用JSON序列化</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
